<template>
  <a-modal width="50%" title="卡组详情" v-model="visible" @cancel="handleCancel" @ok="handleOk">
    <a-table :data-source="deckList">
      <a-table-column title="序号" width="100px">
        <template slot-scope="text, record, index">
          <div>{{ index + 1 }}</div>
        </template>
      </a-table-column>
      <a-table-column title="SKU ID" width="200px">
        <template slot-scope="row">
          <div>{{ row.package_sku_id }}</div>
        </template>
      </a-table-column>
      <a-table-column title="卡片" width="200px">
        <template slot-scope="row">
            <div class="thumb">
              <img v-if="row.package_type" style="width: 58px; height: 86px; margin-left: 21px" :src="row.thumb" />
              <img v-else style="width: 100px; height: 105px" :src="row.thumb" alt="" />
            </div>
        </template>
      </a-table-column>
      <a-table-column title="名称" width="300px">
        <template slot-scope="row">
          <div>{{ row.title }}</div>
        </template>
      </a-table-column>
    </a-table>
  </a-modal>
</template>

<script>
export default {
  props: {
    deckList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    // getData(){
    //     this.$http.get(`/card/package/${id}`).then(res=>{
    //         console.log(res)
    //     })
    // },
    handleOk() {
      this.$emit('ok')
    },
    handleCancel() {
      this.$emit('cancel')
    },
  },
}
</script>
